<template>
	<view class="member">
		<u-navbar>
			<template #left>
				<view class="u-nav-slot">
					<u-sticky bgColor="#fff">
						<u-tabs :list="list1" @click="onClick" lineColor="#6fb666"></u-tabs>
					</u-sticky>
				</view>
			</template>
			<!-- <template #right>
				<view class="search-box">
					<image src="@/static/img/search.png" mode="widthFix" />
				</view>
			</template> -->
		</u-navbar>
		<view class="teleplay" v-if="tabIndex == 0">
			<u-sticky bgColor="#fff">
				<view class="category">
					<my-tabs :list="categoryList" @tabData="tabData" />
				</view>
			</u-sticky>
			<view class="video-wrap">
				<my-videos :list="teleplays" @lower="lower" @onPage="onDetail" />
			</view>
		</view>
		<view class="teleplay" v-if="tabIndex == 1">
			<u-sticky bgColor="#fff">
				<view class="category">
					<my-tabs :list="categoryList" @tabData="tabData" />
				</view>
			</u-sticky>
			<view class="video-wrap">
				<my-videos :list="teleplays" @lower="lower" @onPage="onDetail" />
			</view>
		</view>
		<u-loading-icon mode="circle" :show="isShow" text="加载中" textSize="18"></u-loading-icon>
	</view>
</template>

<script>
	import myTabs from '@/components/my-tabs/my-tabs.vue'
	import myVideos from '@/components/my-videos/my-videos.vue'
	export default {
		components: {
			myTabs,
			myVideos
		},
		data() {
			return {
				isShow: false,
				shotText: '加载中',
				query: {
					page: 1,
					pageSize: 30,
					category_id: ''
				},
				teleplays: [],
				list1: [{
					name: '电视剧',
				}, {
					name: '动漫',
				}, {
					name: '电影'
				}, {
					name: '综艺'
				}, {
					name: '纪录片'
				}, {
					name: '小说'
				}, {
					name: '漫画'
				}, {
					name: '少儿'
				}, {
					name: '云首发'
				}],
				categoryList: [],
				tabIndex: 0
			}
		},
		mounted() {
			this.init(0)
		},
		methods: {
			onClick(item) {
				console.log('item', item);
				this.tabIndex = item.index
				const name = item.name
				switch (name) {
					case '电视剧':
						this.init(0)
						break
					case '动漫':
						this.init(1)
						break
				}
			},
			// 初始化数据
			init(type = 0) {
				console.log(type);
				this.teleplays = []
				this.getCategory(type)
				this.getDataList(type)
			},
			// 获取视频列表
			async getDataList(type) {
				switch (type) {
					case 0:
						const res = await this.$api.getVideoList(this.query)
						if (res.code == 200) {
							res.data.data.forEach(item => {
								item.img = item.cover_lateral
							})
							this.teleplays.push(...res.data.data)
						}
						break
					case 1:
						const res1 = await this.$api.getCartoonList(this.query)
						if (res1.code == 200) {
							res1.data.data.forEach(item => {
								item.img = item.img_url
							})
							this.teleplays.push(...res1.data.data)
						}
						break
				}
				this.isShow = false
			},
			// 获取分类
			async getCategory(type) {
				const param = {
					isAll: true
				}
				switch (type) {
					case 0:
						const res = await this.$api.getVideoCategory(param)
						if (res.code == 200) {
							this.categoryList = res.data.data
							this.categoryList.unshift({
								id: 0,
								name: '全部'
							})
						}
						break
					case 1:
						const res1 = await this.$api.getCartoonCategory(param)
						if (res1.code == 200) {
							this.categoryList = res1.data.data
							this.categoryList.unshift({
								id: 0,
								name: '全部'
							})
						}
						break
				}
			},
			// 切换分类内容
			async tabData(index) {
				console.log(index, 'index');
				this.query.category_id = this.categoryList[index].id
				if (this.query.category_id == 0) {
					this.query.category_id = ''
				}
				this.query.page = 1
				this.teleplays = []
				this.getDataList(this.tabIndex)
			},
			// 进入视频详情
			onDetail(id) {
				console.log(id, 'id');
				switch (this.tabIndex) {
					case 0:
						uni.navigateTo({
							url: `/pages/detail/index?id=${id}`
						})
						break
					case 1:
						uni.navigateTo({
							url: `/pages/cartoon-detail/index?id=${id}`
						})
						break
				}

			},
			lower(val) {
				this.shotText = val
				this.query.page += 1
				this.isShow = true
				this.getDataList(this.tabIndex)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member {
		.search-box {
			// background-color: red;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-top: 2rpx;
			}
		}

		.teleplay {
			margin-top: 110rpx;
		}
	}
</style>
